ant-design-vue 插槽使用

<a-table :columns="columns" :dataSource="dataList" :loading="loading" :pagination="false" :rowKey="(record,index) => index">
        <template slot="duty" slot-scope="text, record, index">
            <span v-if="text == 'general'">普通员工</span>
            <span v-if="text == 'expert'">专家</span>
            <span v-if="text == 'admin'">管理员</span>
        </template>
        <template slot="status" slot-scope="text, record, index">
            <span v-if="text == '1'">正常</span>
            <span v-if="text == '0'">失效</span>
        </template>
        <template slot="action" slot-scope="text, record, index">
            <a-button type="primary" size="small" @click="editUser(record)">编辑</a-button>
        </template>
    </a-table>
    

// script 部分

data(){
        return {
            columns:[
       {
           title: '用户账号',
           dataIndex: 'username',
       },
       {
           title: '姓名',
           dataIndex: 'name',
       },
       {
           title: '角色',
           dataIndex: 'duty',
           scopedSlots: {customRender: 'duty'}
       },
       {
           title: '状态',
           dataIndex: 'status',
           scopedSlots: {customRender: 'status'}
       },
       {
           title: '操作',
           dataIndex: 'action',
           scopedSlots: {customRender: 'action'},
       }],
            dataList: [],
            loading: false,
        }
    },
    created(){
        this.getList()
    },
    methods: {
     getList(){
            this.loading = true;
            this.$http.get('/getUsers.do').then(res => {
                if(res){
                    this.dataList = res || []
                }
                this.loading = false;
            }).catch(err => {
                console.log(err)
            })
        },
        editUser(record){
            this.$refs.addModal.showModal(record)
        },
  	}

1.columns 定义table 表头,以及和 dataList 的字段对应,

2. dataSource 为数据源,是一个数组,

3.loading 加载时loading,数据请求前设置 true,请求完成后设置 false,

4.插槽的使用

很多情况下,后端返回的数据是 数字,前端需要展示文字,这事使用插槽就会非常方便
1.首先,在 columns 中需要的部分添加 scopedSlots: {customRender: ‘status’}
2.table 中添加标签

<template slot="status" slot-scope="text, record, index">
   <span v-if="text == '1'">正常</span>
    <span v-if="text == '0'">失效</span>
</template>
1234

customRender 的值和slot 的值相对应,slot-scope 中 text就是status的值(text可以自定义,key,item都可以), record 代表text所在的对象,可以通过 record 拿到该行的其他值. 比如

editUser(record){
   this.$refs.addModal.showModal(record)
},
123

把record作为参数传递,编辑改用户信息.